<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-chat-line-square"></i>
        参数管理
      </span>
    </div>
    <!-- 表单 -->
    <div class="text item">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item label="">
          <el-input clearable v-model="textSearch" placeholder="请输入参数编码" style="width:240px;" @keyup.enter.native="searchTabeleEnter"
            @clear="searchTabeleEnter">
            <el-button slot="append" icon="el-icon-search" @click="searchTabel"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" plain @click="handleAdd">
            新增
            <i class="el-icon-plus"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <!-- tabel表格 -->
      <div class="el-flex el-box-column">
        <el-table :data="domainTabelData" border stripe style="width: 100%" height="100%" ref="areaRefTable">
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="paramName" label="参数名称"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="paramCode" label="参数编码"></el-table-column>
          <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="paramVal" label="参数值"></el-table-column>
          <el-table-column width="110px" sortable prop="enabled" label="状态" align="center" fixed="right">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.enabled" active-value="Y" inactive-value="N" @change="appStatusclick(scope.$index, scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column width="70px" sortable prop="control" label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="修改参数管理" @click="handleEdit(scope.$index, scope.row)"><i
                  class="el-icon-edit"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!-- 编辑/新增弹框 -->
    <el-dialog :title="modalTitle" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <!-- <div class="container" style="overflow: auto;height: 380px;"> -->
      <el-form label-width="100px" :model="domainFormInline" ref="domainFormInline" class="demo-form-inline">
        <el-form-item label="参数编码:" prop="paramCode" :rules="[
              {
                required: true,
                message: '参数编码不能为空',
                trigger: 'blur'
              }
            ]">
          <el-col :span="12">
            <el-input v-model="domainFormInline.paramCode" placeholder="参数编码" :readonly="readonly"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="参数名称:" prop="paramName" :rules="[
              {
                required: true,
                message: '参数名称不能为空',
                trigger: 'blur'
              }
            ]">
          <el-col :span="15">
            <el-input v-model="domainFormInline.paramName" placeholder="参数名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否启用:" prop="enabled">
          <el-switch v-model="domainFormInline.enabled" active-value="Y" inactive-value="N"></el-switch>
        </el-form-item>
        <el-form-item label="参数值:" prop="paramVal" :rules="[
            {
              required: true,
              message: '参数值不能为空',
              trigger: 'blur'
            }
            ]">
          <el-col :span="12">
            <el-input v-model="domainFormInline.paramVal" placeholder="参数值"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="参数源:" prop="paramSource">
          <el-col :span="12">
            <el-input v-model="domainFormInline.paramSource" placeholder="参数源"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="参数说明:" prop="paramDesc">
          <el-col :span="20">
            <el-input type="textarea" :rows="2" v-model="domainFormInline.paramDesc" placeholder="参数说明"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave">保存 <i class="el-icon-document-checked el-icon--right"></i></el-button>
        <el-button type="danger" @click="handleCheck(false)">关闭 <i class="el-icon-close"></i></el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  import {
    Tree,
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Drawer
  } from 'element-ui'
  import {
    paramsLists,
    detailsInfo,
    addParams,
    editParams
  } from '@/api/system/paramsManage/paramsManage.js'
  export default {
    name: 'paramsManage',
    components: {
      'el-tree': Tree, // 树形菜单
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      'el-drawer': Drawer
    },
    data() {
      let domainInlineVal = {
        paramCode: '',
        paramName: '',
        paramVal: '',
        paramSource: '',
        paramDesc: '',
        enabled: 'Y'
      }
      let domainInlineSearchVal = {
        paramCode: '',
        paramName: '',
        paramVal: '',
        paramSource: '',
        paramDesc: '',
        enabled: ''
      }
      return {
        formInline: JSON.parse(JSON.stringify(domainInlineSearchVal)), // 系统管理高级查询条件
        domainInlineVal: JSON.parse(JSON.stringify(domainInlineVal)), // 新增/编辑弹框里的model,用于重置表单
        domainFormInline: JSON.parse(JSON.stringify(domainInlineVal)), // 系统管理新增/编辑弹框model值
        domainTabelData: [], // 系统管理列表数据
        authorizationData: [], // 点击新增/编辑弹框内的表格获取数据
        domainId: '', // 系统管理列表id
        currentPage: 1, // 当前显示页数
        total: 0, // 显示总页数
        readonly: '', // 设置应用编码不能修改
        nowPageNum: 0,
        tableData: [],
        pageSize: 20,
        checkDatas: [],
        modalTitle: '',
        delVisible: false, // 删除提示弹框的状态
        dialogVisible: false, // 编辑弹框是否显示
        dialogAddVisible: false, // 新增授权弹框是否显示
        dialogSearch: false, // 高级查询搜索弹框显示
        textSearch: '', // 搜索model值
        searchData: '', // 存储搜索来的数据
        userId: [], // 用户id
        areaData: [], // 获取授权所有数据
        totalUser: 0, // 新增授权用户表格总条数
        currentUserPage: 1, // 新增授权用户当前页
        pageUserSize: 20, //  新增授权用户显示页数
        textSearchUser: '' // 搜索新增授权的用户
      }
    },
    created() {
      this.domainTable()
      console.log(this.$refs)
      window.onresize = () => {
        this.$refs.areaRefTable.doLayout()
      }
    },
    methods: {
      // 获取参数管理列表数据
      domainTable(params) {
        // this.axios.post('/base/param/params', {
        //   page: this.currentPage,
        //   size: this.pageSize,
        //   value: params
        // })
        paramsLists({
          page: this.currentPage,
          size: this.pageSize,
          value: params
        }).then(res => {
          if (res.data.code == 10000) {
            this.domainTabelData = res.data.data.records
            this.total = res.data.data.total
            setTimeout(() => {
              this.$refs.areaRefTable.doLayout()
            }, 0)
          }
        })
      },
      // 回车事件
      searchTabeleEnter() {
        this.searchTabel()
      },
      // 搜索事件
      searchTabel() {
        if (this.textSearch) { // 有数据,是要搜索
          this.searchData = this.textSearch
          this.domainTable({
            textSearch: this.searchData
          })
        } else { // 搜索输入框是空的,说明是要重置,不搜索了,展示正常的全部数据
          this.searchData = ''
          this.domainTable()
        }
      },
      // 每页条数
      handleSizeChange(val) {
        this.pageSize = val
        this.domainTable()
      },
      // 当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        // this.domainTable(this.currentPage, this.pageSize)
        if (this.searchData) {
          this.domainTable({
            textSearch: this.searchData
          })
        } else if (this.dialogSearch) {
          this.domainTable(this.formInline)
        } else {
          this.domainTable()
        }
      },
      // 系统管理新增事件
      handleAdd() {
        this.dialogVisible = true
        this.modalTitle = '参数信息'
        this.readonly = false
      },
      // 新增授权表格获取单条数据事件
      authorizationTabel(row) {
        let id = row.paramId
        // this.axios.get(`/base/param/${id}`)
        detailsInfo(id).then(res => {
          this.authorizationData = res.data.data
        })
      },
      // 编辑事件
      handleEdit(index, row) {
        this.dialogVisible = true
        this.modalTitle = '参数信息'
        this.readonly = true
        this.domainFormInline = JSON.parse(JSON.stringify(row))
        this.authorizationTabel(row) // 点击新增弹框内的表格获取数据事件
      },
      // 保存事件
      handleSave() {
        this.$refs.domainFormInline.validate(valid => {
          if (valid) {
            // let userIds = []
            // this.authorizationData.forEach(e => {
            //   userIds.push(e.userId)
            // })
            if (!this.domainFormInline.paramId) { // 新增接口
              // this.axios.post('/base/param/save', {
              //   paramCode: this.domainFormInline.paramCode,
              //   paramName: this.domainFormInline.paramName,
              //   paramVal: this.domainFormInline.paramVal,
              //   paramSource: this.domainFormInline.paramSource,
              //   paramDesc: this.domainFormInline.paramDesc,
              //   enabled: this.domainFormInline.enabled,
              // })

              addParams({
                paramCode: this.domainFormInline.paramCode,
                paramName: this.domainFormInline.paramName,
                paramVal: this.domainFormInline.paramVal,
                paramSource: this.domainFormInline.paramSource,
                paramDesc: this.domainFormInline.paramDesc,
                enabled: this.domainFormInline.enabled,
              }).then(res => {
                if (res.data.code === 10000) {
                  Message.success('新增成功')
                  this.handleClose()
                  this.domainTable()
                }
              })
            } else {
              // 编辑接口
              // this.axios.put('/base/param/update', {
              //   paramCode: this.domainFormInline.paramCode,
              //   paramName: this.domainFormInline.paramName,
              //   paramVal: this.domainFormInline.paramVal,
              //   paramSource: this.domainFormInline.paramSource,
              //   paramDesc: this.domainFormInline.paramDesc,
              //   enabled: this.domainFormInline.enabled,
              //   paramId: this.domainFormInline.paramId
              // })
              editParams({
                paramCode: this.domainFormInline.paramCode,
                paramName: this.domainFormInline.paramName,
                paramVal: this.domainFormInline.paramVal,
                paramSource: this.domainFormInline.paramSource,
                paramDesc: this.domainFormInline.paramDesc,
                enabled: this.domainFormInline.enabled,
                paramId: this.domainFormInline.paramId
              }).then(res => {
                if (res.data.code === 10000) {
                  Message.success('编辑成功')
                  this.handleClose()
                  this.domainTable()
                }
              })
            }
          } else {
            return false
          }
        })
      },
      // 点击tabel里的应用状态触发编辑接口事件
      appStatusclick(index, row) {
        // this.axios.put('/base/param/update', {
        //   paramCode: row.paramCode,
        //   paramName: row.paramName,
        //   paramVal: row.paramVal,
        //   paramSource: row.paramSource,
        //   paramDesc: row.paramDesc,
        //   enabled: row.enabled,
        //   paramId: row.paramId
        // })
        editParams({
          paramCode: row.paramCode,
          paramName: row.paramName,
          paramVal: row.paramVal,
          paramSource: row.paramSource,
          paramDesc: row.paramDesc,
          enabled: row.enabled,
          paramId: row.paramId
        }).then(res => {
          if (res.data.code === 10000) {
            Message.success('操作成功')
            this.domainTable()
          }
        })
      },
      // 关闭弹框事件 主要用于清空表单和校验
      handleClose() {
        this.domainFormInline = JSON.parse(JSON.stringify(this.domainInlineVal))
        this.$refs.domainFormInline.resetFields()
        this.authorizationData = []
        this.dialogVisible = false
      },
      // 编辑弹框点击按钮
      handleCheck() {
        this.handleClose()
      },
    },
  }
</script>
<style lang="scss">
</style>
